import React from 'react';
import { Link } from 'react-router-dom';
export function Hero() {
  const scrollToEditorsPicks = () => {
    const editorsPicksSection = document.getElementById('editors-picks');
    if (editorsPicksSection) {
      editorsPicksSection.scrollIntoView({
        behavior: 'smooth'
      });
    }
  };
  return <div className="relative w-full">
      {/* Hero image */}
      <div className="w-full h-[70vh] min-h-[500px] max-h-[800px] bg-cover bg-center" style={{
      backgroundImage: 'url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80")'
    }}>
        <div className="absolute inset-0 bg-black bg-opacity-30"></div>
        <div className="container mx-auto px-4 h-full flex flex-col justify-center relative z-10">
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white max-w-3xl mb-4">
            Live Smarter, Not Harder
          </h1>
          <p className="text-xl md:text-2xl text-white max-w-2xl mb-8">
            Curated, tested, and expert-approved appliance recommendations for
            your home.
          </p>
          <div className="flex flex-wrap gap-4">
            <Link to="/guides" className="bg-[#d4a373] hover:bg-[#c99b6e] text-white px-6 py-3 rounded-md font-medium text-lg transition-colors">
              Explore Guides
            </Link>
            <button onClick={scrollToEditorsPicks} className="bg-transparent border-2 border-white text-white px-6 py-3 rounded-md font-medium text-lg hover:bg-white hover:text-[#343a40] transition-colors">
              Top Picks
            </button>
          </div>
        </div>
      </div>
    </div>;
}